<template>
  <div class="announcement-list">
    <transition name="slide-fade" mode="out-in">
        <div v-if="!detailInfo">
          <div class="notice-card-container notice-card-list">
            <notice-card :class="{'is-readed':info.status === consts.ANNOUNCEMENT_READ}" v-for="info in tableData.list"
                         :time="info.effectiveDate"
                         :key="info.id"
                         @click.native="openDetail(info)"
            >
              <template slot="title">
                {{info.name}}
              </template>

              <template slot="content">
                {{info.summary}}
              </template>
            </notice-card>
          </div>
          <div class="el-pagination-container">
            <el-pagination
              bordered
              layout="prev, pager, next"
              @size-change="gridSizeChange" @current-change="gridCurrentChange"
                           :current-page="filters.page" :page-size="filters.size"
                           :total="tableData.total">
            </el-pagination>
          </div>
        </div>
      <notice-detail
        :id="detailInfo.id"
        @read="read"
        @close="detailInfo = undefined"
        v-else
      ></notice-detail>
    </transition>
  </div>
</template>

<script>
  import {grid} from '@/build';
  import NoticeCard from './notice-card';
  import NoticeDetail from './notice-detail';


  import {
    systemNoticeListApi as getApi,
  } from '@/services/api/notice';

  //平台公告

  export default {
    name: 'announcement-list',

    mixins: [grid],

    components: {
      NoticeCard,
      NoticeDetail
    },

    props: ['id'],

    data () {
      return {
        filters: {
          size: 8,
          page: 1,
        },
        tableData: {
          total: 0,
          list: [],
        },
        detailInfo: undefined,
      };
    },

    methods: {
      openDetail(info) {
        this.$router.push({params: {...this.$route.params, id: info.id}});
        this.detailInfo = info;
      },
      read(id) {
        const currentDetail = _.find(this.tableData.list, {
          id,
        });
        if (currentDetail) {
          currentDetail.status = consts.ANNOUNCEMENT_READ;
        }
      },
      closeDetail() {
        this.$router.push({params: {...this.$route.params, id: undefined}});
        this.detailInfo = undefined;
      },
      refresh() {
        this.getAll();
      }
    },

    mounted() {
      this.bindGet(getApi, 'tableData', {
        action: 'getGrid',
        sendingData: 'filters',
        afterSuccess: ([result, data]) => {
          if (this.id) {
            this.openDetail(_.find(data.list, {id: Number(this.id)}));
          }
        }
      });

      this.getAll();
    }
  };
</script>

<style lang="scss" >
// unread read
</style>